<template>
  <a-list :bordered="false">
    <!-- 登录密码 -->
    <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>{{ $t('userSetting.SecuritySettings.form.label.password') }}</a-typography-paragraph>
        </template>
        <template #description>
          <div class="content">
            <a-typography-paragraph>{{ $t('userSetting.SecuritySettings.placeholder.password') }}</a-typography-paragraph>
          </div>
          <div class="operation">
            <a-link @click="formRef.onOpen()">{{ $t('userSetting.SecuritySettings.button.update') }}</a-link>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item>
    <!-- 微信绑定 -->
    <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>{{ $t('userSetting.SecuritySettings.form.label.wx') }}</a-typography-paragraph>
        </template>
        <template #description>
          <div class="content">
            <a-typography-paragraph class="tip">
              {{
              $t('userSetting.SecuritySettings.placeholder.wx')
              }}
            </a-typography-paragraph>
          </div>
          <div class="operation">
            <a-link>{{ $t('userSetting.SecuritySettings.button.bind') }}</a-link>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item>
    <!-- 安全手机 -->
    <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>{{ $t('userSetting.SecuritySettings.form.label.phone') }}</a-typography-paragraph>
        </template>
        <template #description>
          <div class="content">
            <a-typography-paragraph
              :editable="mobileEditable"
              :editing="mobileEditable"
              @edit-end="mobileEditEnd"
              :class="[userStore.tel ? '': 'tip']"
              v-model:editText="mobileStr"
            >{{ mobileStr }}</a-typography-paragraph>
          </div>
          <div class="operation">
            <a-link @click="mobileEdit">{{ $t('userSetting.SecuritySettings.button.update') }}</a-link>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item>
    <!-- 安全邮箱 -->
    <a-list-item>
      <a-list-item-meta>
        <template #avatar>
          <a-typography-paragraph>{{ $t('userSetting.SecuritySettings.form.label.email') }}</a-typography-paragraph>
        </template>
        <template #description>
          <div class="content">
            <a-typography-paragraph
              :editable="emailEditable"
              :editing="emailEditable"
              @edit-end="emailEditEnd"
              :class="[userStore.email ? '': 'tip']"
              v-model:editText="emailStr"
            >{{ emailStr}}</a-typography-paragraph>
          </div>
          <div class="operation">
            <a-link @click="emailEdit">{{ $t('userSetting.SecuritySettings.button.update') }}</a-link>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item>
    <SecurityPassword ref="formRef"/>
  </a-list>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useUserStore } from '@/store';
import { useI18n } from 'vue-i18n';
import { Message } from '@arco-design/web-vue';

import SecurityPassword from './security-password.vue';

import { updateSysUser, UserData } from '@/api/sys/user';
import { isEmail, isMobile } from '@/utils/is';

const { t } = useI18n();
const userStore = useUserStore();

const loading = ref(false);

// 表单数据
const formRef = ref();
const formData = ref<UserData>({});

// 手机号编辑
const mobileEditable = ref(false);
const mobileStr = ref<string | undefined>('');

// 手机号编辑
const mobileEdit = () => {
  mobileEditable.value = true;
  mobileStr.value = userStore.tel;
};

// 手机号编辑结束
const mobileEditEnd = () => {
  if (!mobileStr.value || mobileStr.value === '') {
    initMobile();
    return;
  }
  // 未做修改直接返回
  if (mobileStr.value === userStore.tel) {
    initMobile();
    return;
  }
  // is mobile
  if (!isMobile(mobileStr.value)) {
    Message.error(t('userSetting.SecuritySettings.error.phone'));
    initMobile();
    return;
  }
  // 更新邮箱
  loading.value = true;
  formData.value = {
    id: userStore.id,
    tel: mobileStr.value,
  };
  updateSysUser(formData.value)
    .then(() => {
      userStore.info();
      Message.success(t('operations.success'));
    })
    .finally(() => {
      loading.value = false;
      initMobile();
    });
};

// 邮箱编辑
const emailEditable = ref(false);
const emailStr = ref<string | undefined>('');

// 邮箱编辑
const emailEdit = () => {
  emailEditable.value = true;
  emailStr.value = userStore.email;
};

// 邮箱编辑结束
const emailEditEnd = () => {
  if (!emailStr.value || emailStr.value === '') {
    initEmail();
    return;
  }
  // 未做修改直接返回
  if (emailStr.value === userStore.email) {
    initEmail();
    return;
  }
  // is email
  if (!isEmail(emailStr.value)) {
    Message.error(t('userSetting.SecuritySettings.error.email'));
    initEmail();
    return;
  }
  // 更新邮箱
  loading.value = true;
  formData.value = {
    id: userStore.id,
    email: emailStr.value,
  };
  updateSysUser(formData.value)
    .then(() => {
      userStore.info();
      Message.success(t('operations.success'));
    })
    .finally(() => {
      loading.value = false;
      initEmail();
    });
};

const initMobile = () => {
  mobileStr.value = userStore.tel
    ? '已绑定：' + userStore.tel.slice(0, 3) + '****' + userStore.tel.slice(-4)
    : t('userSetting.SecuritySettings.placeholder.phone');
  mobileEditable.value = false;
};

const initEmail = () => {
  emailStr.value = userStore.email
    ? userStore.email
    : t('userSetting.SecuritySettings.placeholder.email');
  emailEditable.value = false;
};

// 初始化数据
const initData = () => {
  initMobile();
  initEmail();
};

initData();
</script>

<style scoped lang="less">
:deep(.arco-list-item) {
  border-bottom: none !important;
  .arco-typography {
    margin-bottom: 20px;
  }
  .arco-list-item-meta-avatar {
    margin-bottom: 1px;
  }
  .arco-list-item-meta {
    padding: 0;
  }
}
:deep(.arco-list-item-meta-content) {
  flex: 1;
  border-bottom: 1px solid var(--color-neutral-3);

  .arco-list-item-meta-description {
    display: flex;
    flex-flow: row;
    justify-content: space-between;

    .arco-input-wrapper {
      border: none;
      background: none;
    }

    .tip {
      color: rgb(var(--gray-6));
    }
    .operation {
      margin-right: 6px;
    }
  }
}
</style>
